<template>
  <div>
    小明的爸爸现在有{{money}}元
    
    <h2>不使用sync修改符</h2>
    <Child :money="money" @update:money="money=$event"></Child>
<!--
第一步:  :money="money"把父组件的数据money传递给子组件使用
第二步:  @update:money="money=$event" 子组件内部触发自定义事件修改父组件中的数据
第三步 父组件接收子组件的新数据,修改数据为新数据
第四步:父组件把修改后的数据重新传递给子组件使用
  第一种方式:父组件未使用事件修饰符:    <Child :money="money" @update:money="money=$event"></Child>
  第二种方式:父组件使用事件修饰符sync:   <Child :money.sync="money"></Child>
  子组件写:@click="$emit('update:money',money-100)"  事件一定也要写这个update:money
  第三种方式  父组件写: v-model='money'
            子组件写: props:['value'] 声明并接收属性
                    模板中使用 @click="$emit('input',value - 100)"
-->
    <h2>使用sync修改符</h2>
<!--    <Child :money.sync="money"></Child>-->
    <h2>使用v-model修改符</h2>
    <Child2 v-model="money"></Child2>
    <hr>
  </div>
</template>

<script type="text/ecmascript-6">
  import Child from './Child.vue'
  import Child2 from './Child2.vue'
  export default {
    name: 'SyncTest',
    data() {
      return {
        money:1000
      }
    },
    components: {
      Child,
      Child2
    }
  }
</script>
